<template>
</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue';

/**
 * 键盘长按事件
 *
 * 这是一个空的组件，用于判断用户是否按下了某个按钮。
 *
 * 做多选功能的时候，会用到这个组件
 *
 * 这么封装，主要是利用 vue 组件的生命周期，组件销毁之后会顺带移除事件。
 */
const props = defineProps({
    // 默认侦听 shift 的长按事件，一般多选会设置在 shift
    key: {type: String, default: 'Shift'},
    // 默认值，注意 value 是单向输入，需要通过 change 事件侦听变化
    modelValue: {type: Boolean, default: false},
    // 键盘按下去的事件
    onkeydown: {type: Function, default: undefined},
    // 键盘松开的事件
    onkeyup: {type: Function, default: undefined}
});

// 是否处于按住的状态
let pressing = false;

const change = (val) => {
    pressing = val;

    emit('update:modelValue', pressing);
    emit('change', pressing);
}

// Emits
const emit = defineEmits(['update:modelValue', 'change']);

// 按下事件
const down = (event) => {
    if (!pressing && event.key === props.key) {
        event.preventDefault();

        //
        change(true);
        if (props.onkeydown) {
            props.onkeydown(event);
        }
    }
};

// 松开事件
const up = (event) => {
    if (event.key === props.key) {
        event.preventDefault();

        //
        change(false);
        if (props.onkeyup) {
            props.onkeyup(event);
        }
    }
};

// 组件挂载时添加事件监听
onMounted(() => {
    window.addEventListener('keydown', down);
    window.addEventListener('keyup', up);
});

// 组件卸载时移除事件监听
onUnmounted(() => {
    window.removeEventListener('keydown', down);
    window.removeEventListener('keyup', up);
});
</script>